{% extends "public/layout.html" %}
{% block sidebar %}
{% endblock %}

{% block body %}
<div style="float:left;min-width:800px;margin-left:10px;margin-top:20px;">
<form action="/resource/server_product_doadd" method='post' class="form-horizontal" role="form" id="product_form">
    <div class="form-group">
        <label class="col-sm-3 control-label">添加业务线/产品线</label>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">业务线名称: </label>
        <div class="col-xs-4">
            <input type="text" autocomplete="off" name="service_name" class="form-control" placeholder="请填写业务线名称">
        </div>
        <label id="name-service_name" class="col-sm-4 control-label error"  for="service_name"></label>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">上级产品线: </label>
        <div class="col-xs-4">
            <select name='pid' class="form-control">
                <option value="0">顶级业务线</option>
                {% for product in products %}
                <option value="{{ product.id }}">{{ product.service_name }}</option>
                {% endfor %}
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">模块字母缩写: </label>
        <div class="col-xs-4">
            <input type="text" autocomplete="off" name="module_letter" class="form-control" placeholder="请填写业务线名称">
        </div>
        <label id="name-service_name" class="col-sm-4 control-label error"  for="module_letter"></label>
    </div>
    <div class="form-group">
        <label  class="col-sm-2 control-label">开发接口人: </label>
        <div class="col-xs-4">
            <input type="text" name="dev_interface" list="dev_interface" class="form-control user" placeholder="请填写业务线名称">
            <datalist id="dev_interface">
                {% for user in users %}
              <option value="{{ user.email }}">{{ user.username }}</option>
                {% endfor %}
            </datalist>
        </div>
        <label id="name-dev_interface" class="col-sm-4 control-label error"  for="dev_interface"></label>
    </div>
    <div class="form-group">
        <label  class="col-sm-2 control-label">运维接口人: </label>
        <div class="col-xs-4">
            <input type="text"  name="op_interface" list="op_interface" class="form-control user" placeholder="请填写业务线名称">
            <datalist id="op_interface">
                {% for user in users %}
              <option value="{{ user.email }}">{{ user.username }}</option>
                {% endfor %}
            </datalist>
        </div>
        <label id="name-op_interface" class="col-sm-4 control-label error"  for="op_interface"></label>
    </div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
  <button type="submit" class="btn btn-primary">添加</button>
</div>
</div>
</form>
</div>
{% endblock %}
{% block js %}
<script src="/static/js/jquery.validate.min.js"></script>
<script>
    $().ready(function() {
    $("#product_form").validate({
        rules: {
            service_name: {
                required: true,
                minlength:2
            },
            module_letter: {
                required: true,
                minlength:2
            },
            dev_interface: {
                required: true,
                email: true
            },
            op_interface: {
                required: true,
                email: true
            }
        },
        messages: {
            service_name: {
                required: "没有输入业务线或产品线名称",
                minlength: "请输入至少2个字"
            },
            module_letter: {
                required: "需要输入模块字母缩写",
                minlength: "请输入至少2个字"
            },
            dev_interface:{
                required: "请输入开发接口人"
            },
            op_interface:{
                required: "请输入运维接口人"
            }
        }
    });
});
</script>
{% endblock %}